<template>
    <div>

         <!-- <input type="file" @input="editimg" ref="editimg" style="display:none"/> -->

         <input type="file" style="display: none" ref="input2" @input="upload2" >
       <!-- 编辑模态框 -->
       <el-dialog
          title="用户详情"
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose">           
          <el-form :model="user" label-width="200px" class="edit">
            <el-form-item label="用户头像" prop="userIcon">
              <el-image id="icon"
                style="width: 100px; height: 100px"
                :src="userinfo.icon"
                ></el-image>
                <!-- <el-button type="primary" @click="$refs.editimg.click()"
              style="float: right;">修改头像</el-button>  -->
            <el-button @click="$refs.input.click()" type="primary"
            style="right:10px">上传头像</el-button>
           </el-form-item>           
           <el-form-item label="用户名" prop="username">
             <el-input v-model="userinfo.username"></el-input>
           </el-form-item>
           <el-form-item label="昵称" prop="nickname">
             <el-input v-model="userinfo.nickname"></el-input>
           </el-form-item>
           <el-form-item label="密码" prop="password">
             <el-input v-model="userinfo.password" 
             type="textarea"
              :rows="3"></el-input>
           </el-form-item>
           <el-form-item label="邮箱" prop="email">
             <el-input v-model="userinfo.email"></el-input>
           </el-form-item>
           <el-form-item label="手机号" prop="phone">
             <el-input v-model="userinfo.phone"></el-input>
           </el-form-item>
          </el-form>
          <el-button type="primary" @click="updateUser">修改</el-button>
        </el-dialog>

       <!-- 新增模态框 -->
       <el-dialog
          title="新增用户"
          :visible.sync="addUserView"
          width="50%"
          :before-close="handleClose">           
          <el-form :model="user" label-width="200px" class="edit">
            <el-form-item label="用户头像" prop="userIcon">
              <el-image id="addicon"
                style="width: 100px; height: 100px"
                src="http://localhost:8081/img/user/icon/001.jpg"
                ></el-image>
                <!-- <el-button type="primary" @click="$refs.editimg.click()"
              style="float: right;">修改头像</el-button>  -->
            <el-button @click="$refs.input2.click()" type="primary"
            style="right:10px">上传头像</el-button>
           </el-form-item>           
           <el-form-item label="用户名" prop="username">
             <el-input v-model="userinfo.username"></el-input>
           </el-form-item>
           <el-form-item label="昵称" prop="nickname">
             <el-input v-model="userinfo.nickname"></el-input>
           </el-form-item>
           <el-form-item label="密码" prop="password">
             <el-input v-model="userinfo.password" ></el-input>
           </el-form-item>
           <el-form-item label="邮箱" prop="email">
             <el-input v-model="userinfo.email"></el-input>
           </el-form-item>
           <el-form-item label="手机号" prop="phone">
             <el-input v-model="userinfo.phone"></el-input>
           </el-form-item>
           <el-form-item label="角色" prop="role">
            <el-radio-group v-model="addrole" size="small" style="width: 500px;">
              <el-radio label="1" border>用户</el-radio>
              <el-radio label="2" border>审核员</el-radio>
              <el-radio label="3" border>管理员</el-radio>
            </el-radio-group>
           </el-form-item>
          </el-form>
          <el-button type="primary" @click="insertUser">新增</el-button>
        </el-dialog>



    
    
    
       <!-- 新增按钮 -->
       <div class="header">
          <el-button type="primary" @click="addUser" >
           + 新增
          </el-button>
    
           <el-button type="danger" icon="el-icon-delete" @click="buchDelete">
             批量删除
           </el-button>
          <!-- <el-button @click="toggleSelection(tableData[2],tableData[3])">切换二三行转态</el-button> -->
    
          <div class="search"> 
            <el-button @click="serach" icon="el-icon-search" type="primary">查询</el-button>
           <!-- 搜索框 -->
          <el-input placeholder="请选择查询方式并输入查询参数" 
           prefix-icon="el-icon-search" 
           v-model="searchinput" clearable>
          </el-input>

          <!-- 条件查询 -->
          <el-select v-model="queryselect" placeholder="状态查询" @change="getByStatus"
           style="margin-right: 20px;margin-left: 0px;">
            <el-option
              v-for="item in selectoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value" >
            </el-option>
          </el-select>



          <!-- 状态查询 -->
          <el-select v-model="role" placeholder="状态查询" @change="getByStatus">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value" >
            </el-option>
          </el-select>
    
          </div>
          <input type="file" style="display: none" ref="input" @input="upload" >
          
       </div>
    
    
     <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        max-height="490"
        stripe
        @select="getselect" @select-all="getselectall">
       
        <el-table-column
          type="selection"
          width="45">
        </el-table-column>
    
        <el-table-column
          prop="user.username"
          label="用户名"
          width="100">
        </el-table-column>
    
        <el-table-column
          prop="userIcon"
          label="用户头像"
          width="100">
          <template slot-scope="scope">
           <el-image
          style="width: 50px; height: 50px"
          :src="scope.row.userIcon"
          ></el-image>
          </template>
        </el-table-column>
    
        <el-table-column
          prop="user.nickname"
          label="昵称"
          empty-text="暂无数据"
          width="110"
          >
        </el-table-column>
    
        <el-table-column
          prop="user.password"
          label="密码"
          width="250">
        </el-table-column>
    
        <el-table-column
          prop="user.email"
          label="邮箱"
          width="160">
        </el-table-column>
    
        <el-table-column
          prop="user.phone"
          label="手机号"
          width="100">
        </el-table-column>
    
        <el-table-column
          prop="user.createtime"
          label="注册时间"
          width="140">
        </el-table-column>
    
        <el-table-column
          prop="user.role"
          label="角色"
          width="80">
          <template slot-scope="scope">
            <el-tag   v-show="scope.row.user.role == 1">用户</el-tag>
            <el-tag type="success" v-show="scope.row.user.role == 2">审核员</el-tag>
            <el-tag   type="danger"    v-show="scope.row.user.role == 3">管理员</el-tag>
          </template>
        </el-table-column>
    
        <!-- <el-table-column
          prop="updatetime"
          label="修改时间"
          width="120">
        </el-table-column> -->
        
        <el-table-column
          prop="user.status"
          label="状态"
          width="80">
          <template slot-scope="scope">
         
             <el-switch  v-model="scope.row.user.status" 
              active-color="#bcafaf" inactive-color="#13ce66"
              ></el-switch>
        
          </template>
        </el-table-column>
    
        <el-table-column label="操作">
          <template slot-scope="scope">

              
           <el-button size="mini" type="primary" @click="editUser(scope.$index, scope.row)">编辑</el-button>
            
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
    
      </el-table>
    
      <!-- 分页插件 -->
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 25]"
          :page-size="pageSize"
          :page-count="paegcount"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalinfo">
        </el-pagination>
     
    </div>
    </template>
    
    <script>
    import reqUser from '@/api/user/user'
import { Form } from 'element-ui'
      export default {
        mounted(){
          //查询用户,初始条件
          const user = {
            "role":this.role,
            "status":this.status
          }
          this.pageSelect(1,10,user)
        },
        data() {
          return {
            tableData: [],
            //根据转态分类查询
              status:2,//2代表所有一般情况(0禁用，1启用)
              role: 4, //4所有都查，1普通用户，2审核，3，超级管理眼
             //当前页面
              currentPage:'',
              //总记录数
              totalinfo:'',
             //每条页数
             pageSize:10,
             //总页数
             pageCount:'',
             //转态查询
             options:[{
                value:4,
                label:'所有'
             },{
                value:1,
                label:'普通用户'
             },
              {
                value:2,
                label:'审核员'
             },{
                value:3,
                label:'管理员'
             }],
             selectoptions:[{
                 value:1,
                 label:'用户名查询'
             },{
                 value:2,
                 label:'昵称查询'
             },{
                 value:3,
                 label:'邮箱查询'
             }],
             //条件查询选项
             queryselect:1,
         
             //编辑框
             userinfo:{
              id:'',
              username:'',
              password:'',
              nickname:'',
              email:'',
              phone:'',
              icon:''
             },
             usericon:'',
             //新增角色选项
             addrole:'',

             //value:4,
             //模态框是否可见
              dialogVisible:false,
              addUserView:false,
              //控制是否是新增或者是修改,默认是新增
               //模态框数据
              info:'',
              //审核结果
              articleId:'',
              checkresult:'',
              //标题模糊查询
              searchinput:'',
              //批量删除
              ids:[],
           
          }
        },
        methods: {
          //分页查询
        async pageSelect(page,size,user){      
           const res = await reqUser.page(page,size,user)     
         if(res.code !== 200){
          alert(res.message)
         }
          this.tableData=res.data.records;
          this.totalinfo = res.data.total
          this.currentPage = res.data.current;    
          this.pageCount = res.data.pages
          console.log(this.tableData);
         },
           
          //删除
          handleDelete(index, row) {
          this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
             // console.log("删除");
             
              const res = await reqUser.deleteByid(row.user.id);
              this.tableData.splice(index,1)
              if(res.code == 200){
                   this.$message({
                type: 'success',
                message: '删除成功!'
              });
              }else this.$message({
                type: 'info',
                message: '删除失败!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          },

          //批量删除
          buchDelete(){
            this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              const res = await reqUser.deleteBuch(this.ids);
              if(res.code == 200){
                   this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //在查询一次就可以了
              this.pageSelect(this.currentPage,this.pageSize,this.value,this.titleinput)
              }else this.$message({
                type: 'info',
                message: '删除失败!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          },
          
          //当页面尺寸变换时
          handleSizeChange(val){
            const user = {
            "role":this.role,
            "status":this.status,
            "username":(this.searchinput!="")?this.searchinput:null,
            "nickname":(this.searchinput!="")?this.searchinput:null,
            "email":(this.searchinput!="")?this.searchinput:null
          }
            this.pageSelect(this.currentPage,val,user)
          },

          //当当前页面变换时
          handleCurrentChange(val){
            const user = {
            "role":this.role,
            "status":this.status,
            "username":(this.searchinput!="")?this.searchinput:null,
            "nickname":(this.searchinput!="")?this.searchinput:null,
            "email":(this.searchinput!="")?this.searchinput:null
          }
            this.pageSelect(val,this.pageSize,user)
          },

            //查看详情
         async seeInfo(index, row){
             //模态框可见
             this.dialogVisible = true
             //文章路径
              const path = row.article.content;
              const txt = await reqArt.getTxt(path)
              this.info= txt
            },

            //审核
            async check(index,row){
               this.dialogVisibleShenhe = true
               this.articleId = row.article.id
            },

            //提交审核结果
           async subcheck(){
              const res = await reqArt.checkArticle(this.articleId,parseInt(this.checkresult))
               if(res.code==200){
                this.$message('已修改状态')
                this.dialogVisibleShenhe = false
                if(this.value!=3){
                 this.tableData.forEach(item=>{
                  if(item.article.id == this.articleId) item.article.status = this.checkresult;
                })
               this.tableData = this.tableData.filter(item=>item.article.status == this.value)
                }
               if(this.value==3){
                   this.tableData.forEach(item=>{
                  if(item.article.id == this.articleId) item.article.status = this.checkresult;
                })
               }
               }
               else{
                this.$message(res.message)
               }
            },

            //根据状态查询用户
          getByStatus(){
            if(this.queryselect==1 && this.searchinput==''){
                //用户名查询
                const user = {
                "role":this.role,
                "status":this.status,
                //"username":this.searchinput,
                }
             this.pageSelect(1,10,user)
            }else if(this.queryselect==2&&this.searchinput==''){
                //昵称查询
                const user = {
                "role":this.role,
                "status":this.status,
                //"nickname":this.searchinput,
             }
             this.pageSelect(1,10,user)
            }else if(this.queryselect == 3&&this.searchinput==''){
                //邮箱查询
                const user = {
                "role":this.role,
                "status":this.status,
                //"email":this.searchinput
               }
              this.pageSelect(1,10,user)
            }else if(this.queryselect == 1 && this.searchinput!=''){
                //用户名查询
                const user = {
                "role":this.role,
                "status":this.status,
                "username":this.searchinput,
                }
               this.pageSelect(1,10,user)
            }else if(this.queryselect == 2 && this.searchinput!=''){
                //用户名查询
                const user = {
                "role":this.role,
                "status":this.status,
                "nickname":this.searchinput,
                }
               this.pageSelect(1,10,user)
            }else if(this.queryselect == 3 && this.searchinput!=''){
                //用户名查询
                const user = {
                "role":this.role,
                "status":this.status,
                "nickname":this.searchinput,
                "email":this.searchinput
                }
               this.pageSelect(1,10,user)
            }
          },

          //根据输入模糊查询
         serach(){
            if(this.queryselect==1){
                //用户名查询
                const user = {
                "role":this.role,
                "status":this.status,
                "username":this.searchinput,
                }
             this.pageSelect(1,10,user)
            }else if(this.queryselect==2){
                //昵称查询
                const user = {
                "role":this.role,
                "status":this.status,
                "nickname":this.searchinput,
             }
             this.pageSelect(1,10,user)
            }else if(this.queryselect == 3){
                //邮箱查询
                const user = {
                "role":this.role,
                "status":this.status,
                "email":this.searchinput
               }
              this.pageSelect(1,10,user)
            }
          },

          //选择框
          getselect(selection){
             const idss = []
             selection.forEach( item => {  idss.push(item.user.id) } )
             this.ids = idss
          },
           
       

          //全选
          getselectall(selection){
             const idss = []
             selection.forEach( item => {  idss.push(item.user.id) } )
             this.ids = idss
          },
          //编辑用户
          editUser(index,user){
             this.dialogVisible = true
             //console.log(user);
            this.userinfo.id = user.user.id
            this.userinfo.username = user.user.username
            this.userinfo.nickname = user.user.nickname
            this.userinfo.email = user.user.email
            this.userinfo.phone = user.user.phone
            this.userinfo.icon = user.userIcon
            this.userinfo.password = user.user.password
          },
          //自定义上传组件
          upload(){
          const file =this.$refs.input.files[0]
          var filereadr = new FileReader()
          filereadr.readAsDataURL(file)
          filereadr.onload=function(){
            var img = document.getElementById('icon')
            img.src = filereadr.result
          }  
             //先存入data中
             this.usericon = this.$refs.input.files[0]

          },
          upload2(){
            const file =this.$refs.input2.files[0]
          var filereadr = new FileReader()
          filereadr.readAsDataURL(file)
          filereadr.onload=function(){
            var img = document.getElementById('addicon')
            img.src = filereadr.result
          }  
             //先存入data中
             this.usericon = this.$refs.input2.files[0]
          },
    //确认修改用户
         async updateUser(){
           var formdata =new FormData()
           if(this.usericon!=null){
             formdata.append("img",this.usericon)
           }
             formdata.append("username",this.userinfo.username)
             formdata.append("password",this.userinfo.password)
             formdata.append("nickname",this.userinfo.nickname)
             formdata.append("email",this.userinfo.email)
             formdata.append("phone",this.userinfo.phone)
            
            const res = await reqUser.updateUser(this.userinfo.id,formdata)
           
            if(res.code==200){
              this.$message({type:"success",message:"修改用户信息成功"})
            }else{
              this.$message({type:"warning",message:res.message})
            }

          },
          //新增用户
          addUser(){
            this.userinfo={}
            this.userinfo.icon = ""
            this.addUserView = true
          },
          //确定新增
        async  insertUser(){
          if(this.userinfo.username==null||this.userinfo.password==null||
          this.userinfo.email==null||this.userinfo.nickname==null||
          this.userinfo.phone==null||this.addrole==null){
            this.$message("信息不能为空！")
            return;
          }
            var formdata =new FormData()
           if(this.usericon!=null){
             formdata.append("img",this.usericon)
           }
             formdata.append("username",this.userinfo.username)
             formdata.append("password",this.userinfo.password)
             formdata.append("nickname",this.userinfo.nickname)
             formdata.append("email",this.userinfo.email)
             formdata.append("phone",this.userinfo.phone)
             formdata.append("role",this.addrole)
            
            const res = await reqUser.insertUser(this.$store.state.userinfo.user.id,formdata)
           
            if(res.code==200){
              this.$message({type:"success",message:"添加用户信息成功"})
            }else{
              this.$message({type:"warning",message:res.message})
            }

          }

          },
      
        
        }
      
    </script>
    <style lang="less" scoped>
     .header{
          display: flex;
          .el-input{
           
             width:200px
          }
          .search{
            margin-left: 100px;
           
          }
       }
    .el-select{
      margin-left: 50px;
      // margin-bottom: 20px;
    }
    .edit{
      width: 400px;
      .el-input{
        width: 200px;
      }
    }
    </style>